今日文章目錄

• 頁籤應用情境
• 事前準備
• CSS練習
• 參考資料

頁籤應用情境

• 頁籤不管是在小尺寸或大螢幕上，都是時常看到的必備零件！今天來練習一下吧！
• 練習範例參考：
  
  圖片參考來源

事前準備

• 這次練習內容會使用 <input type="radio" /> 搭配 CSS選取器 :checked 達到切換頁籤的效果。
• 特別注意：畫面上input會顯藏，使用者是點擊label。
  • <input id="myTab"> 的myTab 要對應到 <label for="myTab">，確保之後點擊label才會選取到。
  • 每個頁籤會對應到一個radio，記得每個radio的name要一致(<input name="panelCtrl">)，這樣才會對應到同組單選。
• HTML 架構：

<section class="mainTab">
    <div class="container">
        <input type="radio" name="panelCtrl" id="tab1" checked>
        <input type="radio" name="panelCtrl" id="tab2">
        <input type="radio" name="panelCtrl" id="tab3">

        <div class="tabPanel">
            <label for="tab1" class="tab tab1">頁籤1</label>
            <label for="tab2" class="tab tab2">頁籤2</label>
            <label for="tab3" class="tab tab3">頁籤3</label>
        </div>
        
        <div class="contentGroup">
            <div class="content content1">
               <!-- 頁籤1 內容 -->
            </div>
            <div class="content content2">
               <!-- 頁籤2 內容 -->
            </div>
            <div class="content content3">
               <!-- 頁籤3 內容 -->
            </div>
        </div>
        
    </div>
</section>

CSS重點

• 留意HTML結構中，input層級同.tabPanel與contentGroup。目的是當radio選取時，我可以同時操作頁籤與頁籤內容。
• 我使用到 ~：表示選取後方同層所有指定對象。以下方CSS為例：
  • #tab1:checked ~ .contentGroup .content1 :
    當radio選取時，後方 .contentGroup內.content1 動作。
  • #tab1:checked ~ .tabPanel .tab1 :
    當radio選取時，後方 .tabPanel內 .tabPanel動作。

    .contentGroup .content{
        display: none;
    }
    #tab1:checked ~ .contentGroup .content1,
    #tab2:checked ~ .contentGroup .content2,
    #tab3:checked ~ .contentGroup .content3{
        display: block;
    }
    #tab1:checked ~ .tabPanel .tab1,
    #tab2:checked ~ .tabPanel .tab2,
    #tab3:checked ~ .tabPanel .tab3{
        border-bottom: 4px solid gray;
    }
    #tab1,
    #tab2,
    #tab3{
        display: none;
    }

• 顯示效果：
  
• codepen 練習範例來了：https://codepen.io/chen-chens/pen/OJgpmro

參考資料

• https://www.youtube.com/watch?v=XCyrzYp3aCY&t=4653s
• https://ithelp.ithome.com.tw/articles/10220656

明日預告：CSS 10天組合零件網頁